.transition-boxes {
    padding: 25px;
    margin: 25px;
    border: 1px solid orange;
}

.appreciate-btn {
    text-align: center;
    height: 30px;
    width: 80px;
    line-height: 30px;
    color: #ff4d4d;
    font-size: 12px;
    font-weight: 700;
    margin: 15px auto;
    border-radius: 15px 5px;
    background-color: #fdd;
    box-shadow: 0 0 20px #fdd;
    -webkit-tap-highlight-color: transparent;
    transition: all .2s;
}

.appreciate-btn:hover {
    border-radius: 5px 15px;
}

.qr-code {
    position: absolute;
    text-align: center;
    /* top: 50%; */
    top: -240px;
    left: 50%;
    transform: translate(-50%, -50%);
    height: 380px;
    width: 250px;
    opacity: 0;
    box-shadow: 0 0 100px #a9a9a9;
    border-radius: 10px;
    background-color: #fff;
    transition: all 1s;
}

.qr-code-display {
    transform: translate(-54%, -50%);
    opacity: 1;
    top: 50%;
}

.qr-code-title {
    margin: 10px 0;
    display: block;
}

.qr-code-zfb {
    height: 200px;
    width: 200px;
    padding: 25px;
    border: 1px solid orange;
    margin: 0 auto;
}